<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .kwd {
            color: dodgerblue;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.7.0/jquery.js"></script>
</head>

<body>
    <input type="file" id="file_jquery" />
    <div class="sort_res"></div>
    <div id="showBox">

        <p id="we"></p>
    </div>

    <script>
        window.onload = () => {
            const myFile = document.getElementById('file_jquery');
            const showBox = document.getElementById('showBox');
            myFile.addEventListener('change', () => {
                const reader = new FileReader();
                reader.readAsText(myFile.files[0], 'utf-8');
                reader.onload = () => {
                    showBox.querySelector('p').innerHTML = reader.result;
                    highlight(reader.result)
                };
            });
        };

        const highlight = (source_text) => {
            const search_list = [
                '白细胞',
                '鼻唇沟',
                '脑脊液白蛋白',
                'EDSS',
                '细胞'
            ]
            search_list.forEach(kwd => { textSearch(source_text, kwd) })

        }

        const textSearch = (source_text, kw, bef=3, aft = 30) => {
            kw_index = 0
            while (kw_index < source_text.length && kw_index > -1) {
                kw_index = source_text.indexOf(kw, kw_index + 1)
                console.log(kw_index)
                if (kw_index > 0) {

                    res = source_text.substr(kw_index-bef, aft + kw.length);
                    var item = $('<li><span class = "kwd">' + '[' + kw_index + ']' + kw + '</span>:' + res + '</li>')

                    console.log(item)
                    $('.sort_res').append(item)
                    console.log('textSearch')
                }

            }


        }
    </script>
</body>

</html>